import React, { useState, useEffect } from 'react'
import { SearchBar } from 'antd-mobile'
import "./index.scss";
import axios from 'axios';
//使用防抖节流
// import debounce from 'lodash/debounce';
import { useNavigate } from "react-router-dom";
function SearchCom(props) {

    const [searchTxt, setSearchTxt] = useState("");
    const [searchList, setSearchList] = useState([]);
    const [reList, setReList] = useState([]);
    const navigate = useNavigate();
    //将搜索的获取数据的函数做防抖节流处理
    // getSearchData = debounce(getSearchData, 1000);

    const changeTxt = (value) => {
        console.log(value);

        setSearchTxt(value);

        //获取数据
        getSearchData(value);
    }

    const getSearchData = (value) => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/esApi/suggestion', { "key": value, "isWholeSale": 0, "channelId": "C06022632001" }
        ).then(res => {
            // console.log(res);
            let data = res.data.data.suggestionList;
            if (data.length > 0) {

                setSearchList(data);

            }
        })
    }
    const goList = (value) => {
        navigate('/list/' + value);
    }
    const goHome = () => {
        navigate('/')
    }
    useEffect(() => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/searchWords', { isWholeSale: 0, channelId: null }
        ).then(res => {
            // console.log(res);
            setReList(res.data.data.keywords)
        })

    })


    return (
        <div className="search_con">
            <div className='search_con_sousuo'> <SearchBar placeholder='请输入内容' showCancelButton={() => true} onCancel={() => {
                goHome()
            }} value={searchTxt} onChange={changeTxt} />
            </div>
            {
                searchList.length !== 0 ? <ul>
                    {
                        searchList.map((item, index) => <li className='jilu' key={index} onClick={() => { goList(item) }}>
                            {item}
                        </li>)
                    }
                </ul>
                    :
                    <div>
                        <div className='remen'>
                            <h3>热门搜索</h3>
                            <div className='remen_shuju'>
                                {
                                    reList.map((item, index) => <span onClick={() => { goList(item.name) }} className={item.isHighlight === "1" ? "hong" : "hui"} key={index}>{item.name}</span>)
                                }
                            </div>

                        </div>
                        {/* <div>
                                <h3>搜索历史</h3>
                                搜索历史需要保存在 localStorage中
                            </div> */}

                    </div>
            }
            <ul>
            </ul>


        </div>
    )

}
export default SearchCom;